/* ===== Modern CSS Reset ===== */
/* 参考自：Andy Bell's Reset (https://piccalil.li/blog/a-modern-css-reset/) */
*,
*::before,
*::after {
    box-sizing: border-box;
    /* 统一盒模型 */
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    /* 平滑滚动 */
    -webkit-text-size-adjust: 100%;
    /* 防止 iOS 横屏时字体放大 */
}

body {
    min-height: 100vh;
    line-height: 1.5;
    text-rendering: optimizeSpeed;
    /* 优化文本渲染 */
    -webkit-font-smoothing: antialiased;
    /* Mac 字体抗锯齿 */
}

/* 移除列表默认样式 */
ul[role='list'],
ol[role='list'] {
    list-style: none;
}

/* 可点击元素（按钮、链接）的默认样式重置 */
a:not([class]) {
    text-decoration-skip-ink: auto;
    /* 下划线避让文字 */
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    /* 防止图片溢出容器 */
}

input,
button,
textarea,
select {
    font: inherit;
    /* 继承字体样式 */
}

/* 移除按钮默认样式 */
button {
    background: none;
    border: none;
    cursor: pointer;
}

/* 减少动画对性能敏感用户的影响 */
@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

body {
    display: flex;
    /* 使用 Flexbox弹性布局 */
    align-items: center;
    /* 垂直居中 */
    justify-content: center;
    /* 水平居中 */
    height: 100vh;
    /* vh 相对单位 viewport height 一屏高度100vh，等比例划分  100% 视窗高度 */
    overflow: hidden;
    /* 超出则隐藏 */
}

.container {
    display: flex;
    width: 90vw;
    align-items: center;
    justify-content: center;
}

.fog-panel {
    height: 80vh;
    border-radius: 50px;
    color: white;
    cursor: pointer;
    margin: 10px;
    position: relative;
    flex: 0.5;
    transition: all 700ms ease-in; 
}

.fog-panel__title {
    font-size: 24px;
    position: absolute;
    bottom: 20px;
    left: 20px;
    opacity: 0;
}

.fog-panel--active {
    flex: 5;
}

.fog-panel--active .fog-panel__title {
    opacity: 1;
    transition: opacity 0.3s ease-in 0.4s;
    /* 从0.4s开始计时，0.3s内完成显示 */
}